<template>
  <div class="page">
    <div class="tree-wrapper">
      <div class="actions">
        <div class="total-count">总数: {{ data.length }}</div>
        <el-popover
            placement="bottom"
            title="筛选"
            trigger="click">
          <div class="filter-content">
            <div class="group">
              <div class="title">来源</div>
              <el-checkbox v-model="filters.fromJar">JAR</el-checkbox>
              <el-checkbox v-model="filters.fromSource">SOURCE</el-checkbox>
            </div>
            <div class="group">
              <div class="title">用途</div>
              <el-checkbox v-model="filters.tagExtends">EXTENDS</el-checkbox>
              <el-checkbox v-model="filters.tagImplement">IMPLEMENTS</el-checkbox>
              <el-checkbox v-model="filters.tagOther">OTHER</el-checkbox>
            </div>
            <div class="group">
              <div class="title">风险</div>
              <el-checkbox v-model="filters.riskUnknown">未知</el-checkbox>
              <el-checkbox v-model="filters.riskNone">无</el-checkbox>
              <el-checkbox v-model="filters.riskLow">低</el-checkbox>
              <el-checkbox v-model="filters.riskMid">中</el-checkbox>
              <el-checkbox v-model="filters.riskHigh">高</el-checkbox>
            </div>
          </div>
          <div slot="reference" class="filter">筛选</div>
        </el-popover>
      </div>
      <div class="tree">
        <div
            class="item"
            :key="getQualifiedName(item)"
            v-for="(item, i) in data"
            :class="{ selected: selected === i }"
            @click="click(i)">
          <span class="remark from">{{ item.from || 'jar' }}</span>
          <span class="remark tag" v-if="item.tag">{{ item.tag }}</span>
          <el-popover
              placement="right"
              trigger="hover">
            <div class="risk-desc">
              <div class="line"><span>高风险</span>指OHOS完全无法实现的方法或类, 或自己能通过移植android代码实现但是非常复杂</div>
              <div class="line"><span>中风险</span>指OHOS未提供相关替代类, 但是能自行实现, 并有一定难度</div>
              <div class="line"><span>低风险</span>指OHOS未提供相关替代类, 自行实现比较简单</div>
              <div class="line"><span>无风险</span>指OHOS能提供相关替代类</div>
              <div class="line"><span>未知</span>指风险数据表内未找到相关数据</div>
            </div>
            <span slot="reference" class="remark risk">{{ getRiskLevel(item) }}</span>
          </el-popover>
          {{ getQualifiedName(item) }}
        </div>
      </div>
    </div>

    <class-detail :current="current"></class-detail>
  </div>
</template>

<script>
import ClassDetail from "@/components/ClassDetail";

export default {
  name: "Result",
  components: {ClassDetail},
  props: {
    result: Object
  },
  data() {
    return {
      data: [],
      selected: 0,
      current: null,
      filters: {
        key: '',
        fromJar: true,
        fromSource: true,
        tagExtends: true,
        tagImplement: true,
        tagOther: true,
        riskUnknown: true,
        riskNone: true,
        riskLow: true,
        riskMid: true,
        riskHigh: true
      }
    }
  },
  mounted() {
  },
  activated() {
    this.data = this.result.data
    this.click(0)

    this.bus.$on('search', key => {
      this.filters.key = key
      this.filter()
      // console.log(key)
    })
  },
  deactivated() {
    this.bus.$off('search')
  },
  methods: {
    click(i) {
      this.selected = i
      this.current = this.data[this.selected]
    },
    filter() {
      let key = this.filters.key
      if (key) key = key.toLowerCase()

      this.selected = -1
      this.current = null
      this.data = this.result.data.filter(d => {
        let result = true
        if (key) result = this.filterKey(d, key)
        if (!result) return false

        if (!this.filters.fromJar) {
          result = !(!d.from || d.from === 'jar')
          if (!result) return false
        }

        if (!this.filters.fromSource) {
          result = !(d.from && d.from === 'source')
          if (!result) return false
        }

        if (!this.filters.tagExtends) {
          result = !(d.tag && d.tag === 'extends')
          if (!result) return false
        }

        if (!this.filters.tagImplement) {
          result = !(d.tag && d.tag === 'implements')
          if (!result) return false
        }

        if (!this.filters.tagOther) {
          result = d.tag
          if (!result) return false
        }

        if (!this.filters.riskHigh) {
          result = !(d.riskLevel && d.riskLevel === 3)
          if (!result) return false
        }

        if (!this.filters.riskMid) {
          result = !(d.riskLevel && d.riskLevel === 2)
          if (!result) return false
        }

        if (!this.filters.riskLow) {
          result = !(d.riskLevel && d.riskLevel === 1)
          if (!result) return false
        }

        if (!this.filters.riskNone) {
          result = !(d.riskLevel === 0)
          if (!result) return false
        }

        if (!this.filters.riskUnknown) {
          result = d.riskLevel !== undefined
          if (!result) return false
        }

        return result
      })
    },
    filterKey(d, key) {
      if (this.getQualifiedName(d).toLowerCase().indexOf(key) >= 0) return true
      if (d.methods) {
        for (let i = 0; i < d.methods.length; i++) {
          if (d.methods[i].method.toLowerCase().indexOf(key) >= 0) return true
        }
      }
      return false
    }
  },
  watch: {
    filters: {
      deep: true,
      handler() {
        this.filter()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.tree::-webkit-scrollbar {
  width: 8px;
  height: 5px;
  background-color: transparent;
}

/*定义滚动条轨道 内阴影+圆角*/
.tree::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  background-color: transparent;
}

/*定义滑块 内阴影+圆角*/
.tree::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .3);
}

.el-checkbox__label
  font-size 12px

.risk-desc
  padding 10px 10px 2px 10px
  font-size 12px
  color #999
  line-height 18px

  .line
    margin-bottom 8px

    span
      color #333
      font-weight 500
      margin-right 5px

.filter-content
  padding 0 10px 10px 10px

  .group
    display flex
    align-items center
    margin-top 15px

    .title
      margin-right 20px

.page
  display flex
  flex 1
  width 100%
  height 100%
  padding-top 46px
  box-sizing border-box

  .tree-wrapper
    display flex
    flex-direction column

    width 350px
    height 100%
    border-right 1px solid #eee
    background #F5F7F9

    .actions
      display flex
      align-items center

      width 100%
      height 40px
      background white
      border-bottom 1px solid #eee

      padding 0 15px
      box-sizing border-box

      .total-count
        flex 1
        font-size 12px
        color #999

      .filter
        font-size 12px
        color #666
        cursor pointer

  .tree
    flex 1
    overflow-y auto
    overflow-x hidden

    .item
      width calc(100% - 24px)
      word-break break-all
      overflow hidden

      padding 10px 16px
      margin 0 12px
      color #333
      font-size 13px
      line-height 16px
      cursor pointer
      border 1px solid transparent
      box-sizing border-box

      &:first-of-type
        margin-top 10px

      .remark
        display inline-block
        padding 0 5px
        background #58a3ba
        color white
        border-radius 2px
        margin-right 5px
        font-size 12px

      .tag
        background #6460d7

      .risk
        background #e76666

      &:hover
        background rgba(0, 0, 0, .05)

    .selected
      background white
      border-radius 2px
      border 1px solid #eee
      color #6363e7

      &:hover
        background white
</style>
